<template>
  <span
    :class="['e-icon', { 'do-not-use-default-color': !defaultColor, disabled: disabled }, 'icon-icon_' + type]"
    :style="{ 'font-size': fontSize, 'line-height': lineHeight, color: iconColor }"
    @click="handleClick"
    @mouseover="handleMouseOver"
    @mouseout="handleMouseOut">
    <span class="path1" />
    <span class="path2" />
    <span class="path3" />
    <span class="path4" />
    <span class="path5" />
    <span class="path6" />
    <span class="path7" />
    <span class="path8" />
    <span class="path9" />
    <span class="path10" />
    <span class="path11" />
    <span class="path12" />
    <span class="path13" />
    <span class="path14" />
    <span class="path15" />
    <span class="path16" />
    <span class="path17" />
    <span class="path18" />
    <span class="path19" />
    <span class="path20" />
  </span>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  type: String,
  fontSize: {
    type: String,
    default: 'inherit'
  },
  lineHeight: {
    type: [String, Number],
    default: 1
  },
  color: {
    type: String,
    default: 'inherit'
  },
  hoverColor: {
    type: String,
    default: ''
  },
  defaultColor: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
const iconColor = ref(props.color)
const handleMouseOver = () => {
  if (props.hoverColor && !props.disabled) iconColor.value = props.hoverColor
}
const handleMouseOut = () => {
  iconColor.value = props.color
}
</script>

<style lang="less" scoped>
span {
  vertical-align: middle;
  &.do-not-use-default-color {
    &:before,
    span[class^='path']:before {
      color: inherit;
    }
  }
  &.disabled {
    cursor: not-allowed !important;
    color: #d5dfe9 !important;
  }
}
</style>
